<template>
  <div id="person">
    <el-dialog v-model="dialogPI" title="修改个人信息" width="30%">
      <span>修改后,文字无法回退,请确认?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogPI = false">取消</el-button>
          <el-button type="primary" @click="EditPI">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="person">
      <div class="head">
        <div class="title">个人信息</div>
      </div>
      <div class="body">
        <div class="BtnOn">
          <span>编辑</span>
          <el-switch
            v-model="passOn"
            class="switch"
            style="--el-switch-off-color: transparent"
          />
        </div>
        <div
          class="form"
          v-loading="loading"
          element-loading-background="rgba(0,0,0, 0.5)"
          element-loading-text="数据加载中..."
        >
          <el-form :rules="rules" :model="form" label-width="120px">
            <el-form-item label="姓名" prop="piName">
              <el-input
                v-model="form.piName"
                placeholder="请输入姓名"
                :disabled="!passOn"
              />
            </el-form-item>
            <el-form-item label="专业方向" prop="piPd">
              <el-input
                v-model="form.piPd"
                placeholder="请输入专业方向"
                :disabled="!passOn"
              />
            </el-form-item>
            <el-form-item label="自我介绍主段落" prop="piSiFirst">
              <el-input
                v-model="form.piSiFirst"
                type="textarea"
                placeholder="请输入自我介绍主段落"
                :rows="7"
                resize="none"
                class="inputL"
                :disabled="!passOn"
              />
            </el-form-item>
            <el-form-item label="自我介绍副段落" prop="piSiSecond">
              <el-input
                v-model="form.piSiSecond"
                type="textarea"
                placeholder="请输入自我介绍副段落"
                :rows="4"
                resize="none"
                class="inputL"
                :disabled="!passOn"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogPI = true" round :disabled="!passOn"
                >修改</el-button
              >
              <el-button round @click="dataList" :disabled="!passOn"
                >回退</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, FormRules } from "element-plus";
import { onMounted, reactive, ref, watch } from "vue";
//后端请求了
import { apiGetPi, piEdit } from "../../../api/index/pi";
//是否编辑还有监听是否编辑,作出提示
const passOn = ref(false);
watch(passOn, () => {
  //成功后
  if (passOn.value) {
    ElMessage({
      type: "success",
      message: "可以编辑了",
    });
  } else {
    ElMessage({
      type: "error",
      message: "禁止编辑了",
    });
  }
});
let loading = ref(true); //加载

const form = ref({
  id: 1,
  piName: "map found you",
  piPd: "",
  piSiFirst: "",
  piSiSecond: "",
});
const rules = reactive<FormRules>({
  piName: [
    { required: true, message: "请输入名字", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  piPd: [
    { required: true, message: "请输入专业方向", trigger: "blur" },
    { min: 3, max: 150, message: "不要超过150", trigger: "blur" },
  ],
  piSiFirst: [
    { required: true, message: "请输入自我介绍主段落", trigger: "blur" },
    { min: 3, max: 500, message: "不要超过500", trigger: "blur" },
  ],
  piSiSecond: [
    { required: true, message: "请输入自我介绍副段落", trigger: "blur" },
    { min: 3, max: 500, message: "不要超过500", trigger: "blur" },
  ],
});
const dialogPI = ref(false);
const EditPI = () => {
  piEdit(form.value).then((res) => {
    //成功后
    ElMessage({
      type: "success",
      message: res + "",
    });
    dialogPI.value = false;
    dataList();
  });
};
//刚进入网页先得到表格数据
onMounted(() => {
  dataList();
});
//增加编辑成功,就刷新表格
const Success = () => {};
//得到表格数据
const dataList = () => {
  apiGetPi().then((res) => {
    loading.value = false; //取消加载
    console.log(res[0]);
    form.value = res[0];
  });
};
</script>

<style lang="less" scoped>
#person {
  width: 100%;
  height: 100%;
  .person {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-image-source: radial-gradient(
      65% 65%,
      transparent 0px,
      transparent 100%,
      cyan 100%
    );
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    background: linear-gradient(
      0deg,
      rgba(white, 0.1),
      rgba(white, 0.3),
      rgba(white, 0.1)
    );
    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;
      .title {
        width: 20%;
        margin: 0 auto;
        height: 80%;
        text-align: center;
        color: aliceblue;
        font-size: 24px;
        line-height: 60px;
        border-bottom: 5px solid aqua;
      }
    }
    .body {
      width: 95%;
      margin: 0 auto;
      height: 85%;
      overflow: hidden;
      .BtnOn {
        width: 100%;
        height: 7%;
        span {
          margin-left: 5%;
          margin-right: 0.5%;
          color: aliceblue;
          font-weight: lighter;
          border-bottom: 1px solid aqua;
        }
      }
      .form {
        width: 65%;
        margin-left: 10%;
        :deep(.el-form-item__label) {
          color: white;
        }

        :deep(.el-input__wrapper) {
          --el-input-focus-border-color: aqua;
          .el-input__inner {
            color: white;
            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }
        :deep(.el-input__wrapper) {
          background-color: transparent;
        }
        :deep(.el-textarea) {
          // 一下为正常
          background-color: transparent;
          .el-textarea__inner {
            overflow: hidden;
            overflow-y: scroll;
            &::-webkit-scrollbar {
              width: 2px;
              height: 100%;
            }
            &::-webkit-scrollbar-thumb {
              /*滚动条里面小方块*/
              border-radius: 2px;
              background: aqua;
            }
            &::-webkit-scrollbar-track {
              /*滚动条里面轨道*/
              border-radius: 2px;
              background: rgba(white, 0.2);
            }
            background-color: transparent;
            --el-input-focus-border-color: aqua;
            color: white;
            &::-webkit-input-placeholder {
              /* WebKit browsers*/
              color: rgba(aqua, 0.5);
            }
          }
        }
        :deep(.el-button) {
          margin: 0 auto;
          width: 30%;
          background-color: transparent;
          color: white;
          &:first-child {
            --el-button-border-color: aqua;
            --el-button-active-border-color: aqua;
            --el-button-hover-text-color: aqua;
            --el-button-divide-border-color: aqua;
          }
        }
      }
    }
  }
  :deep(.el-dialog) {
    --el-dialog-bg-color: rgba(27, 44, 92, 0.5);
    border-image-source: radial-gradient(
      65% 65%,
      transparent 0px,
      transparent 100%,
      cyan 100%
    );
    border-image-slice: 1;
    border-width: 2px;
    border-style: solid;
    .el-dialog__title {
      color: aqua;
    }
    .el-dialog__close {
      color: aqua;
      &:hover {
        color: red;
      }
    }
    .el-dialog__body {
      span {
        color: white;
      }
    }

    .el-button--primary {
      --el-button-bg-color: none;
      --el-button-border-color: rgba(aqua, 0.8);
      --el-button-hover-text-color: black;
      --el-button-hover-bg-color: rgba(aqua, 0.8);
      --el-button-hover-border-color: rgba(aqua, 0.8);
    }
  }
}
</style>
